// import echarts from 'echarts'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/component/tooltip'

import BorderItem from '@/components/borderItem/ui.vue'
import {
  GaugeOption,
  LineOption
} from './option';

export default {
  data() {
    return {
      gaugeItems: [{
        id: 1,
        value: 60,
        name: '经济发展',
      }, {
        id: 2,
        value: 30,
        name: '创新驱动',
      }, {
        id: 3,
        value: 80,
        name: '民生保障',
      }, {
        id: 4,
        value: 50,
        name: '生态环境',
      }],
    }
  },
  components: {
    BorderItem
  },
  mounted() {
    this.initEchart();
    window.onresize = () => {
      this.initEchart()
    }

  },
  methods: {
    initEchart() {
      let myChart1 = echarts.init(this.$refs.echartDiv1)
      let myChart2 = echarts.init(this.$refs.echartDiv2)

      LineOption.series[0].name = '增幅';
      LineOption.series[0].data = [820, 934, 1330, 1000]
      LineOption.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [{
            offset: 0,
            color: '#10C7E7'
          },
          {
            offset: 1,
            color: '#2944BE'
          }
        ]
      )
      myChart1.setOption(LineOption)

      LineOption.series[0].name = '分值';
      LineOption.series[0].data = [700, 356, 500, 600]
      LineOption.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [{
            offset: 0,
            color: 'rgba(196,209,46,1)'
          },
          {
            offset: 1,
            color: 'rgba(172,103,45,1)'
          }
        ]
      )
      myChart2.setOption(LineOption)

      myChart1.resize()
      myChart2.resize()

      this.$refs.gaugeItem.forEach((element, index) => {
        let chart = echarts.init(element)
        let data = this.gaugeItems[index];
        let option = Object.assign({}, GaugeOption);
        option.series[0].data = [{
          value: data.value,
          name: data.name
        }]
        chart.setOption(option)
        chart.resize()
      });
    }
  }
}